<template>
  <view 
    class="course-card" 
    :class="[
      `course-card--${course.status}`,
      { 'course-card--past': isPast }
    ]"
    @click="handleClick"
  >
    <!-- 时间信息 -->
    <view class="course-card__time">
      <view class="course-card__date">{{ formatDate(course.date) }}</view>
      <view class="course-card__time-range">
        {{ formatTime(course.startTime) }} - {{ formatTime(course.endTime) }}
      </view>
      <view class="course-card__duration">{{ getDuration() }}{{ $t('course.minutes') }}</view>
    </view>
    
    <!-- 课程内容 -->
    <view class="course-card__content">
      <!-- 课程标题 -->
      <view class="course-card__title">{{ course.title || $t('course.personalTraining') }}</view>
      
      <!-- 会员信息 -->
      <view class="course-card__member">
        <view class="course-card__member-avatar">
          <image 
            v-if="course.member?.avatar" 
            :src="course.member.avatar" 
            class="course-card__member-img"
            mode="aspectFill"
          />
          <view v-else class="course-card__member-placeholder">
            <text class="course-card__member-text">{{ getAvatarText(course.member?.name) }}</text>
          </view>
        </view>
        <view class="course-card__member-info">
          <view class="course-card__member-name">{{ course.member?.name || $t('course.noMember') }}</view>
          <view v-if="course.member?.phone" class="course-card__member-phone">
            {{ formatPhone(course.member.phone) }}
          </view>
        </view>
      </view>
      
      <!-- 训练计划 -->
      <view v-if="course.trainingPlan" class="course-card__plan">
        <u-icon name="list" size="24rpx" color="#666"></u-icon>
        <text class="course-card__plan-text">{{ course.trainingPlan.name }}</text>
        <view class="course-card__plan-exercises">
          {{ course.trainingPlan.exercises?.length || 0 }}{{ $t('course.exercises') }}
        </view>
      </view>
      
      <!-- 备注 -->
      <view v-if="course.notes" class="course-card__notes">
        <u-icon name="chat" size="24rpx" color="#666"></u-icon>
        <text class="course-card__notes-text">{{ course.notes }}</text>
      </view>
    </view>
    
    <!-- 状态和操作 -->
    <view class="course-card__footer">
      <view class="course-card__status">
        <view 
          class="course-card__status-dot" 
          :class="`course-card__status-dot--${course.status}`"
        ></view>
        <text class="course-card__status-text">{{ getStatusText(course.status) }}</text>
      </view>
      
      <view class="course-card__actions">
        <view 
          v-if="!isPast && course.status !== 'completed'"
          class="course-card__action-btn course-card__action-btn--edit"
          @click.stop="handleEdit"
        >
          <u-icon name="edit-pen" size="28rpx" color="#007AFF"></u-icon>
        </view>
        <view 
          v-if="course.status === 'scheduled'"
          class="course-card__action-btn course-card__action-btn--start"
          @click.stop="handleStart"
        >
          <u-icon name="play-circle" size="28rpx" color="#34C759"></u-icon>
        </view>
        <view 
          v-if="course.status === 'in-progress'"
          class="course-card__action-btn course-card__action-btn--complete"
          @click.stop="handleComplete"
        >
          <u-icon name="checkmark-circle" size="28rpx" color="#34C759"></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { formatDate, formatTime, formatPhone } from '@/utils'
import type { Course } from '@/types'

interface Props {
  course: Course
}

const props = defineProps<Props>()

interface Emits {
  click: [course: Course]
  edit: [course: Course]
  start: [course: Course]
  complete: [course: Course]
}

const emit = defineEmits<Emits>()

// 判断是否是过去的课程
const isPast = computed(() => {
  const now = new Date()
  const courseDateTime = new Date(`${props.course.date} ${props.course.endTime}`)
  return courseDateTime < now
})

// 获取头像文字
const getAvatarText = (name?: string): string => {
  if (!name) return '?'
  return name.length > 1 ? name.slice(-2) : name
}

// 获取课程时长
const getDuration = (): number => {
  const start = new Date(`2000-01-01 ${props.course.startTime}`)
  const end = new Date(`2000-01-01 ${props.course.endTime}`)
  return Math.round((end.getTime() - start.getTime()) / (1000 * 60))
}

// 获取状态文本
const getStatusText = (status: string): string => {
  const statusMap: Record<string, string> = {
    'scheduled': '已预约',
    'in-progress': '进行中',
    'completed': '已完成',
    'cancelled': '已取消',
    'no-show': '未到场'
  }
  return statusMap[status] || status
}

// 事件处理
const handleClick = () => {
  emit('click', props.course)
}

const handleEdit = () => {
  emit('edit', props.course)
}

const handleStart = () => {
  emit('start', props.course)
}

const handleComplete = () => {
  emit('complete', props.course)
}
</script>

<style lang="scss" scoped>
.course-card {
  background: var(--card-bg-color, #ffffff);
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border-left: 8rpx solid var(--primary-color, #007AFF);
  
  &:active {
    transform: scale(0.98);
  }
  
  &--scheduled {
    border-left-color: var(--primary-color, #007AFF);
  }
  
  &--in-progress {
    border-left-color: var(--warning-color, #FF9500);
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.05), transparent);
  }
  
  &--completed {
    border-left-color: var(--success-color, #34C759);
  }
  
  &--cancelled {
    border-left-color: var(--error-color, #FF3B30);
  }
  
  &--no-show {
    border-left-color: var(--text-color-tertiary, #999999);
  }
  
  &--past {
    opacity: 0.7;
  }
}

.course-card__time {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 24rpx;
  padding-bottom: 24rpx;
  border-bottom: 2rpx solid var(--border-color-light, #f5f5f5);
}

.course-card__date {
  font-size: 28rpx;
  font-weight: 600;
  color: var(--text-color, #333333);
}

.course-card__time-range {
  font-size: 26rpx;
  color: var(--text-color-secondary, #666666);
  flex: 1;
}

.course-card__duration {
  font-size: 24rpx;
  color: var(--primary-color, #007AFF);
  background: var(--primary-color-light, #e3f2fd);
  padding: 6rpx 12rpx;
  border-radius: 12rpx;
  font-weight: 500;
}

.course-card__content {
  margin-bottom: 24rpx;
}

.course-card__title {
  font-size: 32rpx;
  font-weight: 600;
  color: var(--text-color, #333333);
  margin-bottom: 20rpx;
}

.course-card__member {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.course-card__member-avatar {
  width: 64rpx;
  height: 64rpx;
  margin-right: 16rpx;
  flex-shrink: 0;
}

.course-card__member-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.course-card__member-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color, #007AFF), var(--primary-color-light, #5AC8FA));
  display: flex;
  align-items: center;
  justify-content: center;
}

.course-card__member-text {
  color: #ffffff;
  font-size: 24rpx;
  font-weight: 600;
}

.course-card__member-info {
  flex: 1;
  min-width: 0;
}

.course-card__member-name {
  font-size: 28rpx;
  font-weight: 500;
  color: var(--text-color, #333333);
  margin-bottom: 4rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-card__member-phone {
  font-size: 24rpx;
  color: var(--text-color-secondary, #666666);
}

.course-card__plan {
  display: flex;
  align-items: center;
  gap: 8rpx;
  margin-bottom: 16rpx;
  padding: 16rpx;
  background: var(--bg-color-light, #f8f9fa);
  border-radius: 12rpx;
}

.course-card__plan-text {
  font-size: 26rpx;
  color: var(--text-color, #333333);
  font-weight: 500;
  flex: 1;
}

.course-card__plan-exercises {
  font-size: 24rpx;
  color: var(--text-color-secondary, #666666);
}

.course-card__notes {
  display: flex;
  align-items: flex-start;
  gap: 8rpx;
  padding: 16rpx;
  background: var(--bg-color-light, #f8f9fa);
  border-radius: 12rpx;
}

.course-card__notes-text {
  font-size: 26rpx;
  color: var(--text-color-secondary, #666666);
  line-height: 1.5;
  flex: 1;
}

.course-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.course-card__status {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.course-card__status-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  
  &--scheduled {
    background-color: var(--primary-color, #007AFF);
  }
  
  &--in-progress {
    background-color: var(--warning-color, #FF9500);
  }
  
  &--completed {
    background-color: var(--success-color, #34C759);
  }
  
  &--cancelled {
    background-color: var(--error-color, #FF3B30);
  }
  
  &--no-show {
    background-color: var(--text-color-tertiary, #999999);
  }
}

.course-card__status-text {
  font-size: 26rpx;
  color: var(--text-color-secondary, #666666);
  font-weight: 500;
}

.course-card__actions {
  display: flex;
  gap: 16rpx;
}

.course-card__action-btn {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  background: var(--bg-color-light, #f8f9fa);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  
  &:active {
    transform: scale(0.9);
  }
  
  &--edit {
    &:active {
      background: rgba(0, 122, 255, 0.1);
    }
  }
  
  &--start {
    background: rgba(52, 199, 89, 0.1);
    
    &:active {
      background: rgba(52, 199, 89, 0.2);
    }
  }
  
  &--complete {
    background: rgba(52, 199, 89, 0.1);
    
    &:active {
      background: rgba(52, 199, 89, 0.2);
    }
  }
}

// 暗色主题适配
[data-theme='dark'] {
  .course-card {
    --card-bg-color: #1c1c1e;
    --text-color: #ffffff;
    --text-color-secondary: #8e8e93;
    --text-color-tertiary: #636366;
    --bg-color-light: #2c2c2e;
    --border-color-light: #38383a;
    --primary-color-light: rgba(10, 132, 255, 0.2);
  }
}
</style>